<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
	<title>个人中心</title>
	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<!-- 引入 axios -->
	<script  th:src="@{/resource/js/axios/axios.min.js}" ></script>
	<!-- 引入样式文件 -->
	<link rel="stylesheet" th:href="@{/resource/css/style.css}" type="text/css">
	<link rel="stylesheet" th:href="@{/resource/css/vant/index.css}" type="text/css">
	<!--  lay-ui	-->
	<link rel="stylesheet" th:href="@{/resource/js/layui/css/layui.css}">
	<script  th:src="@{/resource/js/layui/layui.js}"></script>

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script  th:src="@{/resource/js/vue/vue.min.js}" ></script>
	<script  th:src="@{/resource/js/vant/vant.min.js}" ></script>
	<!-- 引入echarts -->
	<script th:src="@{/resource/js/echarts.min.js}"></script>
	<!-- jquery -->
	<script th:src="@{/resource/js/jquery-3.3.1.min.js}"></script>
</head>
<body>
<div id="app">
	<div class="center-container">
		<!-- header start -->
		<div class="header-container">
			<div class="user-card">
				<div class="user-info">
					<img class="avatar"  th:src="${user.getHeadimgurl()}">
					<div class="user-base-info">
						<div class="nickname">
							[[${user.nickname}]]
						</div>
						<div class="tel">
							{{sex == 0?'男':'女'}}
						</div>
						<div class="tel" >手机号</div>
					</div>
				</div>
			</div>
		</div>
		<!-- header end -->
		<div class="container">
			<van-tabs sticky @click="onClickTab">
				<van-tab>
					<template #title>
						<van-icon :name="tools[0].icon"/>
						{{tools[0].label}}
					</template>
					<div class="plan">
						<!-- 柱状图 -->
						<div style="height: 330px" id="main"></div>
						<!-- 饼状图 -->
						<div style="height: 330px" id="pieChart"></div>
					</div>
				</van-tab>
				<van-tab>
					<template #title>
						<van-icon :name="tools[1].icon"/>
						{{tools[1].label}}
					</template>
					<!-- 锦鲤码表格 -->
					<van-list class="van-liat">
						<van-cell is-link style="text-align: center" v-for="item in list" :key="item" :title="item" @click="cellClick(item)"/>
						<van-popup
								v-model:show="showRight"
								position="right"
								:style="{ width: '80%', height: '100%', background: '#eff2f5'}"
						>
							<div class="plan">
								<div class="plan-card-first van-hairline--bottom">
									<a>发布数量</a>
								</div>
								<div class="plan-card van-hairline--bottom">
									<a>状态</a>
								</div>
								<div class="plan-card van-hairline--bottom">
									<a>发布时间</a>
								</div>
								<div class="plan-card van-hairline--bottom">
									<a>发布方式</a>
								</div>
								<div class="plan-card van-hairline--bottom">
									<a>自选码编号</a>
								</div>
								<div class="plan-card van-hairline--bottom">
									<a>失效规则</a>
								</div>
								<div class="plan-card van-hairline--bottom">
									<a>失效时间</a>
								</div>
								<div class="plan-card-last">
									<a>失效次数</a>
								</div>
							</div>
						</van-popup>
					</van-list>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</div>
</body>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				mpAppId: '[[${mpAppId}]]',
				mpAppSecret: '[[${mpAppSecret}]]',
				sex: '[[${user.sex}]]',
				tools: [
					{
						label: "详情",
						icon: "flower-o"
					},
					{
						label: "发布列表",
						icon: "fire-o"
					}
				],
				showRight: false,
				list: [1,2,3,4,5,6,7,8,9],
				password: 'password'
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				$( function (){
					var myChart = echarts.init(document.getElementById('main'));
					var option = {
						title: {
							text: '扫码数据 (最近半年数据)',
							left: 'center',
						},
						legend: {
							data: ['次数'],
							y: -3
						},
						xAxis: {
							data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
						},
						yAxis: {},
						series: [
							{
								name: '销量',
								type: 'bar',
								data: [5, 20, 36, 10, 10, 20]
							}
						]
					};
					myChart.setOption(option);
					var pieChart = echarts.init(document.getElementById('pieChart'));
					var optionChart = {
						title: {
							text: '锦鲤码使用情况',
							left: 'center'
						},
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							bottom: 'bottom'
						},
						series: [
							{
								name: 'Access From',
								type: 'pie',
								radius: '50%',
								data: [
									{ value: 1048, name: 'Search Engine' },
									{ value: 735, name: 'Direct' },
									{ value: 580, name: 'Email' },
									{ value: 484, name: 'Union Ads' },
									{ value: 300, name: 'Video Ads' }
								],
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};
					pieChart.setOption(optionChart);
				})
			},
			onClickTab() {

			},
			cellClick(data) {
				this.showRight = !this.showRight
				if (this.showRight){
					console.log(data)
				}
			}
		}
	})
</script>
<style lang="css">
	.plan{
		margin: 8px;
		padding: 8px;
		background-color: #fff;
		border-radius: 10px;
	}
	.plan-card-first{
		background-color: #fff;
		text-align: left;
		border-radius: 10px;
		padding: 12px 17px 17px;
	}
	.plan-card{
		background-color: #fff;
		text-align: left;
		margin-top: 8px;
		border-radius: 10px;
		padding: 12px 17px 17px;
	}
	.plan-card-last{
		background-color: #fff;
		text-align: left;
		margin-top: 8px;
		border-radius: 10px;
		padding: 12px 17px 12px;
	}
</style>
</html>
